<template>
  <div v-loading.lock="loading">
    <el-dialog title="借阅审批" :visible.sync="verifyOpen" :before-close="cancel" width="800px" append-to-body>
      <el-form ref="form" :model="verifyRow" label-width="100px">
        <el-row>
          <el-col :span="12" class="margin-form">
            <el-form-item label="申请用户">
              <span>{{verifyRow.cnName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借阅目的" prop="usePurpose">
              <span>{{verifyRow.usePurpose | dict(usePurpose)}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="margin-form">
            <el-form-item label="借阅人类型" prop="userType">
              <span>{{verifyRow.userType | dict(userType)}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借阅人姓名" prop="userForeignName">
             {{verifyRow.userForeignName}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="margin-form">
            <el-form-item label="借阅人证件" prop="userCertificate">
              <span>{{verifyRow.userCertificate | dict(borrowerId)}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件编号" prop="userCertificateNo">
              {{verifyRow.userCertificateNo}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="width: 98.5%">
            <el-form-item label="借阅人单位" prop="userForeignDept">
              <span>{{verifyRow.userForeignDept}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="margin-form">
            <el-form-item label="开始时间" prop="beginTime" class="time-picker">
              <span>{{verifyRow.timeBegin}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime" class="time-picker">
              <span>{{verifyRow.timeEnd}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="借阅描述" prop="remark">
            {{verifyRow.remark}}
          </el-form-item>
        </el-row>
      </el-form>
      <div class="table-margin">
        <h2>借阅档案</h2>
        <Table :tableData="tableData" :tableLabel="tableLabel" :handleOperaBrowse="handleOperaBrowse" :handleExcludes="handleExclude" :handleDetails="handleDetail" />
      </div>
      <div class="table-margin">
        <h2>审批记录</h2>
        <Table :tableLabel="recordLabel"/>
      </div>
      <div>
        <h2>审批表单</h2>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <PopMessage :showPop.sync="showPop" :rowInfo="rowInfo"/>
  </div>
</template>

<script>
import Table from "@/components/Tables"
import PopMessage from "@/views/search/complex/components/PopMessage"
import { searchByRow } from "@/api/search/complex";
import { excludeDoc } from "@/api/fileSharing/fileBorrow/borrowRegister/borrowInfo";

export default {
    components: {
      Table,
      PopMessage
    },
    props: ["verifyOpen", "verifyRow"],
    data() {
      return {
        tableLabel: [
          {
            prop: "serial",
            label: "序号",
            cancelSelection: 1
          },
          {
            prop: "processInstNo",
            label: "档案号"
          },
          {
            prop: "approveStatus",
            label: "状态"
          },
          {
            prop: "isOpera",
            label: "操作",
            isOpera: true,
            showExclude: true,
            showDetail: true,
            showBrowse: true
          },
        ],
        recordLabel: [
          {
            prop: "serial",
            label: "序号",
            cancelSelection: true
          },
          {
            prop: "node",
            label: "审批节点"
          },
          {
            prop: "dealer",
            label: "处理人"
          },
          {
            prop: "approveStatus",
            label: "处理状态"
          },
          {
            prop: "opinion",
            label: "处理意见"
          },
          {
            prop: "dealtTime",
            label: "处理时间"
          }
        ],
        showPop: false,
        rowInfo: [],
        loading: false
      }
    },
    methods: {
        cancel() {
            this.$emit("update:verifyOpen", false)
        },
        handleOperaBrowse() {
          
        },
        handleExclude(row) {
          const newRow = {...row};
          newRow.approveFlag = 1;
          delete newRow.approveStatus;
          excludeDoc(newRow).then(res => {
            row.approveFlag = 1;
          })
        },
        handleDetail(row) {
          this.rowInfo = {};
          this.loading = true;
          searchByRow(row.tableNo).then(res => {
            this.rowInfo = res.data;
            this.showPop = true;
          }).finally(() => this.loading = false);
        },
        submitForm() {
          
        }
    },
    computed: {
        open: {
            get() {
                return this.verifyOpen;
            },
            set() {
                this.cancel();
            }
        },
        userType() {
            const userType = this.$attrs.userTypeDict;
            const result = userType.map(item => {
                return {dictLabel:item.dictLabel, dictValue:item.dictValue}
            });
            return result;
        },
        usePurpose() {
            const usePurposeDict = this.$attrs.usePurposeDict;
            const result = usePurposeDict.map(item => {
                return {dictLabel:item.dictLabel, dictValue:item.dictValue}
            });
            return result;
        },
        borrowerId() {
            const borrowerIdDict = this.$attrs.borrowerIdDict;
            const result = borrowerIdDict.map(item => {
                return {dictLabel:item.dictLabel, dictValue:item.dictValue}
            });
            return result;
        },
        tableData() {
            let serial = 0;
            const {arBorrowDetailList} = this.verifyRow;
            if(arBorrowDetailList) {
              arBorrowDetailList.forEach(item => {
                item.approveStatus = item.approveFlag == 0?"正常" : "剔除";
                item.serial = ++serial
              }); 
              return arBorrowDetailList;
            }
        }
    },
    filters: {
      dict(val, types) {
        switch(val) {
          case "0": 
            return types[0].dictLabel
          case "1":
            return types[1].dictLabel
        }
      }
    }
}
</script>

<style scoped>
::v-deep .el-dialog__title {
  font-weight: bold;
  font-size: 21px;
  color: rgb(96,98,102);
}
.table-margin {
  margin-bottom: 50px;
}
</style>